import { useQuasar } from '@teld/q-components';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  createNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import {
  defineComponent,
  onMounted,
  ref,
  computed,
  reactive,
  watch,
  nextTick,
  onBeforeUnmount,
} from 'vue';
import { useDraggable } from './vueuse/core/useDraggable';

import ImagePreviewPc from './pc';
import ImagePreviewMobile from './mobile';

import styles from './index.module.scss';

/**
 * 图片预览组件
 */
export default defineComponent({
  name: createNameSpace('ImagePreview'),
  props: {
    ...commonProps,
    /** v-mode 用，类型`Boolean | String | null | undefined` */
    modelValue: {
      default: null,
    },
    // srcList: 图片地址列表透传给子组件
  },
  emits: ['update:model-value'],
  components: {
    ImagePreviewPc,
    ImagePreviewMobile,
  },
  setup(props, { attrs, emit, expose, slots }) {
    const $q = useQuasar();

    const [mappingProps, mappingExpose] = useMappingProps(props);

    /**
     * 图片预览器是否可见
     * 用计算属性实现对入参的双向绑定
     */
    const vModelValue = computed({
      get() {
        return typeof props.modelValue === 'string' && props.modelValue;
      },
      set(v) {
        emit('update:model-value', v);
      },
    });


    /**
     * 手动打开图片预览，并指定一个图片地址
     * @param {String} src 图片地址
     * @returns
     */
    const open = src => {
      if (!src || !src.length || typeof src !== 'string') return;
      vModelValue.value = src;
    };

    expose({
      ...mappingExpose,
      open,
    });

    return () => {
      return vModelValue.value ? (
        <>
          {$q.platform.is.desktop ? (
            <image-preview-pc
              v-model={vModelValue.value}
              {...attrs}
            ></image-preview-pc>
          ) : (
            <image-preview-mobile
              v-model={vModelValue.value}
              {...attrs}
            ></image-preview-mobile>
          )}
        </>
      ) : null;
    };
  },
});
